<template>
  <content-box :title="title" :tips="tips" style="height: 380px" :loading="loading">
    <div class="chart full-width full-height" ref="chart"></div>
  </content-box>
</template>

<script>
import contentBox from './content-box'
import echarts from 'echarts'
import chart from './chart-option'
import { secondToHour, secondToString } from 'src/assets/js/util'
import { addListener } from 'resize-detector'
import { getCurStatus } from 'src/boot/status-monitor/status-overview'
import { mapGetters } from 'vuex'
export default {
  name: 'shift-real-time',
  components: {
    contentBox
  },
  props: ['hasWork', 'hasCraft'],
  data () {
    return {
      title: '当班状态统计',
      tips: '所选车间内设备状态时间与班制开始时间到当前时间的百分比。',
      chart: null,
      loading: false,
      explain: {
        process: '运行',
        stop: '停机',
        breaks: '断开',
        offLine: '离线',
        alarm: '报警',
        changeLine: '换线',
        fault: '故障',
        repair: '维修'
      },
      // 当班状态
      curStatus: {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alarm: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      },
      total: 0,
      data: [],
      chartsData: []
    }
  },
  computed: {
    ...mapGetters(['statusList'])
  },
  mounted () {
    addListener(this.$refs.chart, this.$utils.debounce(() => {
      if (this.$route.name !== 'statusOverview') {
        return
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
      }
    }, 100))
  },
  methods: {
    getStatus (params, workshopId, lineId) {
      this.loading = true
      lineId !== 'all' && (params['lineId'] = lineId)
      // 当班状态分布
      getCurStatus(params, workshopId).then(res => {
        // this.curTotal = this.getTotal(res.data)
        this.total = res.data.total
        this.curStatus = res.data
        delete this.curStatus.total
        this.changeInfo()
      }).finally(() => {
        this.loading = false
      })
    },
    clearData () {
      this.curStatus = {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alarm: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      }
      this.changeInfo()
    },
    changeInfo () {
      this.explain.process = this.statusList[0].label
      this.explain.stop = this.statusList[1].label
      this.explain.breaks = this.statusList[2].label
      this.explain.offLine = this.statusList[3].label
      this.explain.alarm = this.statusList[4].label
      let data = []
      for (let key in this.curStatus) {
        if (this.curStatus[key] && this.curStatus[key] > 0) {
          data.push({
            value: this.curStatus[key],
            keyName: this.explain[key],
            name: key,
            time: secondToString(this.curStatus[key])
          })
        }
      }
      // 过滤
      if (!this.hasWork && this.hasCraft) {
        data = data.filter(v => v.name !== 'fault' || v.name !== 'repair')
      } else if (this.hasWork && !this.hasCraft) {
        data = data.filter(v => v.name !== 'changeLine')
      } else if (!this.hasWork && !this.hasCraft) {
        data = data.filter(v => v.name !== 'fault' || v.name !== 'repair' || v.name !== 'changeLine')
      }
      data = data.map(item => {
        return {
          ...item,
          percent: item.value ? (item.value / this.total * 100).toFixed(1) : 0,
          value: secondToHour(item.value)
        }
      })
      this.data = data
      this.chartsData = data.filter(item => item.value !== 0)
      if (this.chartsData.length > 0) {
        this.setOption(this.chartsData)
      } else {
        this.setOption(this.data)
      }
    },
    setOption (data) {
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      }
      const option = chart.getStatusBar(data)
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
